<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>网站后台管理模版</title>
	<link rel="stylesheet" type="text/css" href="/public/static/admin/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/public/static/admin/css/admin.css" />
	<meta name="referrer" content="no-referrer" /><!-- 头部403 -->
	<!-- 图片上传 -->
	<script src="/public/static/admin/imgupdate/jquery.min.js"></script>
	<script src="/public/static/admin/imgupdate/jQuery.upload.min.js"></script>
	<link rel="stylesheet" href="/public/static/admin/imgupdate/upload.css">
	<!-- 图片上传 -->
	<script src="/public/static/admin/js/layer/layer.js"></script>
	<script src="/public/static/admin/xm-select/xm-select.js"></script>
	<style>
		body .layer-test {
			background: none;
			box-shadow: none;
		}

		/* 定制化 */
		html .layui-layer-demo {
			background-color: #eee;
		}

		.layui-layer-demo .layui-layer-title {
			border: none;
			background-color: #333;
			color: #fff;
		}
	</style>
	<script>
		var index = 1;
		var listTypeData = []; //渲染数据时候 这里记录了渲染的信息 只记录种类的 协作者 / 创作者
		var listIdOrUserNameData = []; //渲染数据时候 这里记录了渲染的信息 只记录用户名id
	</script>
</head>

<body>
	<div class="page-content-wrap">
		<div class="layui-tab" style="margin: 0;">
			<div class="layui-tab-content">
				<div class="layui-tab-item"></div>
				<div class="layui-tab-item layui-show">
					<div class="layui-form-item">
						<label class="layui-form-label">漫画名称：</label>
						<div class="layui-input-block">
							<input type="text" name="projectname" required lay-verify="required"
								placeholder="请输入漫画名称如： 我的妹妹不可能这么可爱/缘之空/···" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">详细信息： </label>
						<div class="layui-input-block">
							<textarea type="tel" name="comics-info" required lay-verify="required" placeholder="请输入漫画简介"
								autocomplete="off" class="layui-input"></textarea>
						</div>
					</div>

					<div class="layui-tab-item layui-show">
						<form class="layui-form" style="width: 90%;padding-top: 20px;">
							<div class="layui-form-item">
								<label class="layui-form-label">允许下载：</label>
								<div class="layui-input-block">
									<input type="checkbox" checked="" name="download" lay-skin="switch"
										lay-filter="switchTest" lay-text="ON|OFF">
									<div class="layui-unselect layui-form-switch" lay-skin="_switch"><em>OFF</em><i></i>
									</div>
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">允许评论：</label>
								<div class="layui-input-block">
									<input type="checkbox" checked="" name="comment" lay-skin="switch"
										lay-filter="switchTest" lay-text="ON|OFF">
									<div class="layui-unselect layui-form-switch" lay-skin="_switch"><em>OFF</em><i></i>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">漫画分类：</label>
						<div class="layui-input-block">
							<div id="comics-class"></div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">漫画标签：</label>
						<div class="layui-input-block">
							<div id="comics-tags"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="padding-left: 10px;">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-normal button-save-changes" lay-submit
						lay-filter="formDemo">创建此项目</button>
					<button type="reset" class="layui-btn layui-btn-primary button-refresh-page">刷新页面</button>
				</div>
			</div>
		</div>
	</div>

	<script src="/public/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['form', 'element'], function () {});

		$('button.button-save-changes').click(function (e) { //提交数据
			var $title = $.trim($("input[name='projectname']").val());
			var $info = $.trim($("textarea[name='comics-info']").val());
			var $class = comicsClass.getValue()
			var $tags = comicsTags.getValue()

			if (
				$title == undefined ||
				$title == "" ||
				$info == undefined ||
				$info == "" ||
				!$class.length ||
				!$tags.length
			) {
				layer.open({
					type: 0,
					skin: 'layui-layer-demo', //样式类名
					title: "发生意外错误",
					closeBtn: 0, //不显示关闭按钮
					anim: 2,
					maxWidth: '50%',
					maxHeight: '50%',
					shadeClose: false, //开启遮罩关闭
					content: '<div style="max-width:100%">' +
						'<li style="text-align:center;" class="layer-area">' +
						'<div style="text-align:center;">' +
						'<img draggable="false" style="max-Width:70%;max-height:60%;" src="https://i0.hdslb.com/bfs/album/89f61ba7b2456dfd5af4bd92b485553274f73ad4.png">' +
						'<div style="text-align:center;">' +
						'<font>发生意外错误 所有项目不可为空</font>' +
						'</div>' +
						'</div>' +
						'</li>' +
						'</div>',
					btn: ['确认', ] //可以无限个按钮
						,
					btn1: function (index, layero) {
						layer.close(index);
					}
				});
				return;
			}
			layer.open({
				type: 1,
				title: false, //不显示标题栏
				closeBtn: false,
				area: '300px;',
				shade: 0.8,
				id: 'LAY_layuipro', //设定一个id，防止重复弹出
				btn: ['确定', '取消'],
				btnAlign: 'c',
				moveType: 1, //拖拽模式，0或者1
				content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">请注意下<br>您确定要创建一个名为' +
					"<font style='color:red;'>" + $title + "</font>" +
					'的漫画么<br><br>创建完成后 您可以对这本漫画进行添加章节 添加作者 / 协作者(汉化组)</div>',
				success: function (layero) {
					var btn = layero.find('.layui-layer-btn');
					btn.find('.layui-layer-btn0').click(() => {
						$.ajax({
							type: "post",
							url: "/{$useradmin}/Create/SeverComics",
							data: {
								'projectname': $title,
								'ComicsInfo': $info,
								"comment": $("input[name=comment]").prop(
									'checked'), //是否允许下载
								"download": $("input[name=download]").prop(
									'checked'), //是否允许评论
								"comicsClass": $class,
								"comicsTags": $tags,
								"hashHmac_toKen": "{$hashHmac_toKen}"
							},
							dataType: "json",
							success: function (response) {

							}
						});
					});
				}
			});
		});
		$('button.button-refresh-page').click(function (e) { //刷新页面
			location.reload()
		});

		var comicsTags = xmSelect.render({
			el: '#comics-tags',
			autoRow: true,
			toolbar: {
				show: true
			},
			filterable: true,
			remoteSearch: true,
			remoteMethod: function (val, cb, show) {
				//这里如果val为空, 则不触发搜索
				if (!val) {
					return cb([]);
				}
				//这里引入了一个第三方插件axios, 相当于$.ajax
				$.ajax({
					type: "post",
					url: '/{$useradmin}/SelectController/SelectTags',
					data: {
						keyword: val,
						toKen: "{$hashHmac_toKen}", //用户token
						time: "{$time}",
					},
					dataType: "json",
					success: function (response) {
						if (response.code == 200) {
							var res = response.data;
							cb(res)
						} else {
							cb([]);
						}
					}
				});
			},
		})


		classified_catalogue = '{$classified_catalogue}';
		var c = document.createElement('div');
		c.innerHTML = classified_catalogue;
		classified_catalogue = c.innerText || c.textContent;
		c = null;

		var comicsClass = xmSelect.render({
			el: '#comics-class',
			autoRow: true,
			toolbar: {
				show: true
			},
			filterable: true,
			data: JSON.parse(classified_catalogue),
		})
	</script>

</body>

</html>